<template>
  <div>
    <p class="banner"><img src="../../assets/banner.png" alt="" width="100%"></p>
    <wv-group>
      <wv-input placeholder="请输入国内手机号" v-model="accountName" type="number" :maxlength="11"></wv-input>
      <wv-input placeholder="请输入短信验证码" v-model="smscode">
        <button class="weui-vcode-btn" slot="ft" :disabled="disabled" @click="getCode(accountName)" ref="buttons">
          <span v-show="show">获取验证码</span>
          <span v-show="!show" class="count">{{count}} s</span>
        </button>
      </wv-input>
    </wv-group>
    <wv-button type="primary" @click="goNext(accountName,smscode)">注册/登录</wv-button>
    <p class="register" @click="goLogin()">收不到验证码? </p>
    <p class="agree" v-show="hidshow">登录即代表同意我们的<span @click="goLookService()">服务协议</span> 和<span
      @click="goLookPrivacy()">隐私政策</span></p>
  </div>

</template>

<script type="text/ecmascript-6">
  import {getSmscode, fastregister, userInfo} from '../../../test/unit/http'
  import {getStore, setStore, removeStore} from '../../../test/unit/storage'
  import {Toast} from 'we-vue'

  export default {
    name: 'register',
    props: {},
    data() {
      return {
        disabled: false,
        show: true,
        count: '',
        smscode: '',
        accountName: '',
        isBack: false,
        shareBackUrl: '',
        docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
        showHeight: document.documentElement.clientHeight,   //实时屏幕高度
        hidshow: true  //显示或者隐藏footer
      };
    },
    methods: {
      goLogin() {
        this.$router.push({path: 'login'})
      },
      goLookService() {
        this.$router.push({path: 'service'})
      },
      goLookPrivacy() {
        this.$router.push({path: 'privacy'})
      },
      getSmsCode(params) {
        getSmscode(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.$refs.buttons.style.backgroundColor = '#c9e3fc';
              this.$refs.buttons.style.border = 'none';
              this.disabled = true;
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  this.$refs.buttons.style.backgroundColor = '#fff';
                  this.$refs.buttons.style.border = '1px solid #2f95f0';
                  clearInterval(this.timer);
                  this.timer = null;
                  this.disabled = false;
                }
              }, 1000)
            }
          } else {
            Toast.text(res.info);
          }
        })
      },
      goNext(accountName, smscode) {
        let utils = this.$myUtils;
        if (utils.isNull(accountName)) {
          Toast.text('请输入手机号');
          return;
        }
        if (!utils.checkMobile(accountName)) {
          Toast.text('手机号格式不正确');
          return;
        }
        if (utils.isNull(smscode)) {
          Toast.text('请输入验证码');
          return;
        }
        let openId = getStore("openId");
        if (this.$myUtils.isNull(openId)) {
          openId = "";
        }
        let params = {accountName: accountName, smscode: smscode, openId: openId};
        fastregister(params).then(res => {
          if (res.code == 100) {
            let token = res.object.token;
            setStore('token', token);
            let isHave = res.object.isHave;
            if (isHave) {
              this.$router.push({path: 'index'})
            } else {
              this.$router.push({path: 'cata'})
            }
          } else {
            Toast.fail(res.info)
          }
        })
      },
      getCode(accountName) {
        if (this.$myUtils.isNull(accountName)) {
          Toast.text("手机号不能为空");
          return;
        }
        if (!this.$myUtils.checkMobile(accountName)) {
          Toast.text('手机号格式不正确');
          return;
        }
        let params = {mobile: accountName, smsKey: 'hOWt3hiakXHrePCqDKUsPz5T6f7j8P'};
        this.getSmsCode(params);
      }
    },
    created() {
      let token = getStore('token');
      let isEmpty = this.$myUtils.isNull(token);
      if (!isEmpty) {
        userInfo({}).then(res => {
          console.info(res);
          if (res.code == 100) {
            let account = res.object.account;
            if (this.$myUtils.isNull(account.openId)) {
              removeStore("token");
            } else {
              let isEnable = res.object.isEnable;
              let isHave = res.object.isHave;
              if (isEnable == 1) {
                if (isHave) {
                  this.$router.push({path: 'index'})
                } else {
                  this.$router.push({path: 'cata'})
                }
              } else {
                Toast.fail("您的账户被冻结")
              }
            }
          }
          console.log(res)
        })
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      }
    },
    watch: {
      showHeight: function () {
        if (this.docmHeight > this.showHeight) {
          this.hidshow = false
        } else {
          this.hidshow = true
        }
      }
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .banner img {
    object-fit: cover;
  }

  .weui-btn_primary {
    background-color: #2e94f0;
    margin-top: 30px;
  }

  button.weui-btn {
    width: 94%;
    margin-top: 30px;
  }

  .register {
    text-align: right;
    padding-right: 15px;
    margin-top: 20px;
  }

  .register a {
    color: #f37670;
  }

  .agree {
    position: fixed;
    bottom: 30px;
    text-align: center;
    width: 100%;
  }

  .agree span {
    color: #2d93f0;
  }

  .weui-vcode-btn {
    color: #2f95f0;
    border: 1px solid #2f95f0;
    width: 155px;
  }

  .count {
    color: #fff;
  }
</style>
